<template>
  <div class="add">
    <div class="selectWarp clearFix">
      <div class="fl row">
        <!--店铺状态-->
        <span class="title">店铺类型</span>
        <div class="o-select dis-block">
            <w-select :options="shopTypeList" v-model="params.type" @on-select="onSelectType"></w-select>
        </div>
      </div>
      <div class="fl row">
        <!--店铺名称-->
        <span class="title">店铺名称</span>
        <div class="input dis-block inp">
          <w-input holder="请填写" v-model="params.company"></w-input>
        </div>
      </div>
      <div class="fl row">
        <!--手机号码-->
        <span class="title">手机号码</span>
        <div class="input dis-block inp">
          <w-input holder="请填写" rule="isMobile" error="请输入正确的手机号" v-model="params.contactPhone"></w-input>
        </div>
      </div>
    </div>
    <div class="searchWarp">
      <w-button @on-click="fetchShopListSerach">查询</w-button>
    </div>
    <!--横线-->
    <div class="line"></div>
    <!--店铺列表内容-->
    <div class="showShopList clearfix">
      <!--商铺列表标题-->
      <div class="shopTitle clearFix">
        <h3 class="fl">商铺列表</h3>
        <div class="shopTotal fr">共计：{{companyLists.totalCount}}条</div>
      </div>
      <!--商铺列表展示-->
      <div class="shopListContent">
        <w-table :columns="columns" :has-data="hasData">
          <tr v-for="(companylist, index) in companyLists.recordList" :key="index">
            <td>{{(companyLists.currentPage - 1) * companyLists.showCount + (index + 1)}}</td>
            <td>{{companylist.licenseCname}}</td>
            <td>{{companylist.licenseCcontact}}</td>
            <td>{{companylist.licenseCmobile}}</td>
            <td style="max-width: 400px">{{companylist.licenseCaddress}}</td>
            <td>{{companylist.type}}</td>
            <td>
              <span class="cur t-under" @click="$router.push(`/shopMange/shopinfo?three=${$route.query.three}&storeid=${companylist.id}`)">查看</span>
            </td>
            <td>
              <span class="cur c-main" @click="$router.push(`classify?three=${params.threeMenuCode}&suid=${companylist.id}`)">录入</span>
            </td>
          </tr>
        </w-table>
      </div>
      <div class="page fr" v-if="companyLists.pageCount > 1">
        <w-paging :current="companyLists.currentPage" :total="companyLists.pageCount" @on-page="onChangePage"></w-paging>
      </div>
    </div>
  </div>
</template>

<script>
import { apiShopMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      columns: [
        { title: '序号', width: '8%' },
        { title: '店铺名称', width: '14%' },
        { title: '店主用户名', width: '10%' },
        { title: '手机号', width: '12%' },
        { title: '所在地', width: 'auto' },
        { title: '店铺类型', width: '10%' },
        { title: '公司信息', width: '8%' },
        { title: '操作', width: '8%' }
      ],
      hasData: true,
      // 获取店铺列表 
      params: {
        accessToken: this.token || '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 20,
        company: '',
        type: '',
        contactPhone: ''
      },
      companyLists: {}
    }
  },
  computed: {
    ...mapGetters(['token', 'shopTypeList'])
  },
  created() {
    this.fetchShopType()
    this.fetchShopList()
  },
  methods: {
    ...mapActions(['fetchShopType']),
    /**
     * 获取店铺列表
     */
    fetchShopList() {
      this.hasData = true
      this.params.accessToken = this.token
      apiShopMange.apiShopList(this.params).then(data => {
        this.companyLists = data.data || {}
        if (this.companyLists.pageCount == 0) {
          this.hasData = false
        }
      })
    },
    /**
     * 条件搜索，参数重置
     */
    fetchShopListSerach() {
      this.params.currentPage = 1
      this.fetchShopList()
    },
    /**
     * 根据选择的店铺类型获取店铺列表
     */
    onSelectType(type) {
      this.params.type = type
      // this.fetchShopList()
    },
    /**
     * 分页
     */
    onChangePage(page) {
      this.params.currentPage = page
      this.fetchShopList()
    }
  }
}
</script>

<style lang="scss">
.shopListContent{
  th {
    padding: 13px 0 12px;
    font-size: 15px;
    font-weight: bolder;
  }
  .m-paging button{
    width: 30px!important;
    height: 30px!important;
  }
}
</style>

<style lang="scss" scoped>
.t-under {
  color: #2D8EFE;
  text-decoration-line: underline;
}
.clearFix:after {
  content: "";
  height: 0;
  display: block;
  /*overflow: hidden;*/
  clear: both;
}
.selectWarp {
  padding: 21px 0px 0px 18px;
  margin-bottom: 40px;
  /*选择框和输入框的title*/
  span {
    display: inline-block;
    color: #222222;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    text-align: center;
  }
  /*选择框*/
  .o-select {
    display: inline-block;
    margin-left: 9px;
    width: 270px;
    height: 28px;
  } /*店铺名称,手机号继承选择框的样式*/
  .inp {
    @extend .o-select;
  }
  /*选择框和输入框默认向右40px*/
  .row {
    margin-right: 40px;
  }
  .input {
    vertical-align: middle;
  }
}
.searchWarp {
  width: 140px;
  height: 32px;
  margin: 0 auto;
  margin-bottom: 20px;
  .btn {
    width: 100%;
    height: 100%;
    font-size: 13px !important;
  }
}
/*查询与 商铺列表分割线*/
.line {
  width: 100%;
  border: 1px solid #ccc;
}
/*商铺列表样式*/
.showShopList {
  /*商铺标题*/
  .shopTitle {
    padding: 15px 0 15px 0;
    h3 {
      font-size: 16px;
      color: rgba(0, 0, 0, 1);
      font-weight: 600;
    }
    .shopTotal {
      color: rgba(0, 0, 0, 1);
      line-height: 20px;
    }
  }
  .page{
      padding-top: 30px;
    }
  /* 商品店铺的列表展示 */
  .shopListContent {

    td {
      border: 1px solid #dbdbdb;
      padding: 15px 0;
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
    }

  }
}
</style>
